<template>
	<view id="domxee-content" :class="globalData.defaultThemes">
		<view id="header_wrapper">
			<nii-navbar :globalData="globalData" :scroll="scroll">
				<view slot="title">
					<view id="title" class="fw-bolder">购物车</view>
				</view>
			</nii-navbar>
		</view>
		<view id="content_wrapper">
			<view id="lists">
				<view class="lists d-padding">
					<view class="lists_box">
						<view class="lists_empty text-center" v-if="renders.lists.length <= 0">
							<view class="domxee_icon less_text iconfont icon-search"></view>
							<view class="text vice_text fw-bold">购物车居然是空的</view>
						</view>
						<view class="item section" v-for="(item, index) in renders.lists" :key="index">
							<view class="item_box d-flex justify-content-between align-items-center">
								<view class="left flex-shrink">
									<view class="domxee_icon color fw-bolder iconfont icon-yuanquan_xuanzhong font-40" @click="selectItem(item.id)" v-if="data.sections.selected.includes(item.id)"></view>
									<view class="domxee_icon vice_text iconfont icon-yk_yuanquan font-40" @click="selectItem(item.id)" v-else></view>
								</view>
								<view class="right d-flex align-items-center">
									<view class="cover_box">
										<u--image :src="item.cover" width="190rpx" height="190rpx" radius="20rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="cover">
										  <template v-slot:loading>
											 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
										  </template>
										  <template v-slot:error>
											 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
										  </template>
										</u--image>
									</view>
									<view class="infos">
										<view class="title fw-bolder u-line-2">{{item.title}}</view>
										<view class="price fw-bolder color">¥{{(item.price/100).toFixed(2)}}</view>
										<view class="number_box bg_op_2 d-flex justify-content-between align-items-center">
											<view class="domxee_icon iconfont icon-jianfa" @click="changeNumber(item.id, false)"></view>
											<view class="number text-center">{{data.sections.settlements[item.id]}}</view>
											<view class="domxee_icon iconfont icon-jiafa" @click="changeNumber(item.id, true)"></view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view id="footer">
				<view class="footer nav_bg d-padding">
					<view class="footer_box">
						<view class="line d-flex justify-content-between align-items-center">
							<view class="name fw-bolder">共计</view>
							<view class="price color fw-bolder">¥{{data.sections.price}}</view>
						</view>
						<view class="button fw-bold bg text-center w-fill-available" @click="settlementAction">立即购买</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globalData: {windowWidth: 0, statusBarHeight: 0, navHeight: 0, navigationBarHeight: 0, wechatCapsule: {width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0}, defaultThemes: [], colors: {}, configs: {} },
				scroll: 0,
				current_page: {route: '', params: {}, url: ''},
				ready: false,
				options: {

				},
				styles: {

				},
				shows: {

				},
				renders: {
					lists: [],
					settlements: {},
					amounts: {}
				},
				data: {
					sections: {
						price: '0.00',
						settlements: {},
						amounts: {},
						selected: []
						
					},
				},
			}
		},
		onReady() {						//页面渲染完毕后操作（动态获取/调整元素宽高位置等需在ready后获取最为准确）
			//设置对象
			let that = this;

		},
		onShow() {						//页面显示后操作（关闭、后台运行等操作后重新打开访问触发、可在实时性较高操作页面进行全页刷新）
			//设置对象
			let that = this;
			//初始数据
			that.initInformation();
		},
		onLoad(options) {				//页面加载时操作（options可获取当前页面传递参数，如：options.id）
			//设置对象
			let that = this;
			//设置当前页面数据
			that.current_page = that.nii_common.pages.getCurrentUrl();
			//设置默认数据
			that.globalData = that.nii_common.pages.initGlobalData(getApp().globalData);
			//设置参数
			that.options = options;
			//初始数据
			that.initInformation();
		},
		methods: {
			//默认跳转操作
			navigateAction: function(alias, requestParams = {}, action = 'navigate', authenticate = false, animationType = 'slide-in-right') {
				//跳转页面
				this.nii_common.navigate.action(alias, requestParams, action, authenticate, animationType);
			},
			initInformation: function() {
				//设置对象
				let that = this;
				//loading
				!that.ready && that.nii_common.toastLoading('加载中');
				//开始准备
				that.ready = false;
				//发起请求
				that.nii_common.request.build('cart/information', {}, 'GET', function (res) {
					//设置准备已就绪
					that.ready = true;
					//设置参数
					that.renders = res.data;
					//设置信息
					that.data.sections.settlements = res.data.settlements;
					that.data.sections.amounts = res.data.amounts;
					//清空选中
					that.data.sections.selected = [];
					//计算金额
					that.computePrice();
					//停止刷新
					uni.stopPullDownRefresh();	
				}, function (res) {
					//提示错误
					that.nii_common.toastAlert(res.msg);
				}, function(res) {
					//隐藏loading
					that.nii_common.toastLoadingHide();
				}, true);
			},
			selectItem: function (id) {
				//设置对象
				let that = this;
				// //判断数据
				// if (uni.$u.test.isEmpty(that.data.sections.selected)) {
				// 	//追加数据
				// 	that.data.sections.selected.push(id);
				// } else {
				// 	//判断是否包含数据
				// 	if (that.data.sections.selected.includes(id)) {
				// 		//移除数据
				// 		that.nii_common.removeArrItem(that.data.sections.selected, id);
				// 	} else {
				// 		//追加信息
				// 		that.data.sections.selected.push(id);
				// 	}
				// }
				//设置为单选
				that.data.sections.selected = [id];
				//计算金额
				that.computePrice();
			},
			changeNumber: function (id, inc = true) {
				//设置对象
				let that = this;
				//获取当前数量
				var number = parseInt(that.data.sections.settlements[id]), update_number = (inc ? (number + 1) : (number - 1)), confirmFunc = function (success) {
					//loading
					that.nii_common.toastLoading('正在更改...');
					//发起请求
					that.nii_common.request.build('cart/number', {id: id, number: update_number}, 'POST', function (res) {
						//执行成功
						success();
					}, function (res) {
						//提示错误
						that.nii_common.toastAlert(res.msg);
					}, function(res) {
						//隐藏loading
						that.nii_common.toastLoadingHide();
					}, true);	
				};
				//判断数量
				if (parseInt(update_number) <= 0) {
					//弹窗提示
					uni.showModal({
						title: '温馨提示',
						content: '请确认是否将此商品移出购物车？',
						confirmColor: that.globalData.colors.theme.color,
						confirmText: '确定',
						cancelText: '取消',
						success:function(res){
							//判断是否确认
							if (res.confirm) {
								//执行操作
								confirmFunc(function () {
									//刷新数据
									that.initInformation();
								});
							}
						}
					});
				} else {
					//直接操作数据
					confirmFunc(function () {
						//设置数据
						that.data.sections.settlements[id] = update_number;
						//计算金额
						that.computePrice();
					});
				}
			},
			computePrice: function () {
				//设置对象
				let that = this;
				//整理总金额
				var amount = 0;
				//判断是否存在选中
				if (!uni.$u.test.isEmpty(that.data.sections.selected)) {
					//循环选中
					that.data.sections.selected.forEach((id, index) => {
						//增加金额
						amount += (parseInt(that.data.sections.settlements[id]) * parseInt(that.data.sections.amounts[id]));
					});
				}
				//设置总金额
				that.data.sections.price = parseInt(amount/100).toFixed(2);
			},
			settlementAction: function () {
				//设置对象
				let that = this;
				//判断是否存在选中
				if (uni.$u.test.isEmpty(that.data.sections.selected)) {
					//提示错误
					that.nii_common.toastAlert('请选择至少一项结算');
					//返回失败
					return false;
				}
				//跳转结算页面
				that.navigateAction('cart.settlement', {ids: that.data.sections.selected.join('-')})
			},
			// requestDemo: function() {
			// 	//获取对象
			// 	const that = this;
			// 	//loading
			// 	that.nii_common.toastLoading('处理中...');
			// 	//发起请求
			// 	that.nii_common.request.build('', {}, 'POST', function (res) {
			// 		//提示成功
			// 		that.nii_common.toastAlert('处理成功', 'success');
			// 	}, function (res) {
			// 		//提示错误
			// 		that.nii_common.toastAlert(res.msg);
			// 	}, function(res) {
			// 		//隐藏loading
			// 		that.nii_common.toastLoadingHide();
			// 	});	
			// }
		},
		onPullDownRefresh(res) {
			//设置对象
			let that = this;
			//页面下拉刷新时的事件
			that.initInformation();
		},
		onReachBottom() {
			//设置对象
			let that = this;
			
			//TODO：页面滑动触底时的事件
			
		},
		onPageScroll: function(e) {
			//设置页面滑动高度
			this.scroll = e.scrollTop

			//TODO：需判断滑动高度后处理的事件

		}
	}

</script>

<style lang="scss">
	#header_wrapper {
		#title {
			font-size: 40rpx;
			line-height: 48rpx;
			letter-spacing: 1rpx;
			margin-left: 10rpx;
			font-weight: 600;
		}
		.domxee_icon {
			font-size: 40rpx;
			line-height: 34rpx;
		}
	}
	#content_wrapper {
		padding-bottom: 300rpx;
		#lists {
			margin-top: 30rpx;
			.lists {
				.lists_box {
					.lists_empty {
						margin-top: 30rpx;
						.domxee_icon {			
							font-size: 300rpx;
							line-height: 300rpx;
						}
						.text {
							margin-top: 10rpx;
							font-size: 26rpx;
							line-height: 34rpx;
						}
					}
					.item {
						margin-top: 20rpx;
						padding: 40rpx 20rpx;
						border-radius: 20rpx;
						.item_box {						
							.left {
								margin-right: 20rpx;
								.domxee_icon {
									font-size: 30rpx;
									line-height: 34rpx;
								}
							}	
							.right {
								.cover_box {
									width: 190rpx;
									height: 190rpx;
									border-radius: 20rpx;
									margin-right: 20rpx;
								}
								.infos {
									.title {
										width: 380rpx;
										height: 80rpx;
										font-size: 28rpx;
										line-height: 40rpx;
									}
									.price {
										margin-top: 12rpx;
										font-size: 26rpx;
										line-height: 36rpx;
									}
									.number_box {
										margin-top: 12rpx;
										width: max-content;
										border-radius: 20rpx;
										padding: 10rpx 20rpx;
										.domxee_icon {
											font-size: 24rpx;
											line-height: 34rpx;
										}
										.number {
											margin: 0 10rpx;
											font-size: 24rpx;
											line-height: 34rpx;
											min-width: 60rpx;
										}
									}
								}
							}
						}
					}
					.item:first-child {
						margin-top: 0;
					}
				}
			}
		}
		#footer {
			position: fixed;
			/* #ifndef APP || MP-WEIXIN */
				margin-bottom: env(safe-area-inset-bottom);
				bottom: 60px;
			/* #endif */
			/* #ifdef APP || MP-WEIXIN */
				bottom: 0;
			/* #endif */
			left: 0;
			width: 750rpx;
			.footer {
				.footer_box {
					padding: 40rpx 0 50rpx 0;
					.line {
						.name {
							font-size: 32rpx;
							line-height: 44rpx;
						}
						.price {
							font-size: 32rpx;
							line-height: 44rpx;
						}
					}
					.button {
						margin-top: 40rpx;
						padding: 20rpx 100rpx;
						border-radius: 40rpx;
						font-size: 28rpx;
						line-height: 40rpx;
					}
				}
			}
		}
	}
</style>
